<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .menu{
            width: 600px;
            height: 400px;
            background-color: cyan;
        }
        .row{
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .btn{
            width: 150px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="app">
    
</div>
<script>
    let App={
        template:`
        <div class='menu'  >
            <div v-for="(item ,index) in list"  class="row">
                <p > {{item.name}}</p>
                <div class="btn">
                    <p>¥：{{item.price}} </p>
                    <button  @click="subtract(item)">-</button>
                    <p>{{ item.count}}</p>
                    <button @click="add(item)">+</button>
                    </div>
            </div>
            <p :style="{margin:'auto'}" >总价格:{{priced}}</p>
        </div>
    `,
    data(){
        return{
            count:1,
            price:130,
            list: [
                { name: '香蕉', price: 10, count: 1 },
                { name: '苹果', price: 20, count: 1 },
                { name: '葡萄', price: 30, count: 1 },
                { name: '榴莲', price: 50, count: 1 },
                { name: '西瓜', price: 20, count: 1 },
            ],
    }
    },
    computed:{
        priced() {
            let sum = 0;
            this.list.forEach((item)=> {
            sum += item.count * item.price
            })
            return sum
        }
    },
    methods:{
        add:function(item){
            if(item.count === 4){
                item.count = 4;
            }else{
                item.count++
            }
        },
        subtract:function(item){
            if(item.count===1){
                item.count = 1
            }else{
                item.count--
            }
        }
    },
    }
    new Vue({
        render: h => h(App)
    }).$mount("#app")
</script>
</body>
</html>